<template>
  <!-- 公司列表 -->
  <div class="company_list" ref="company_list">
    <!-- 上拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="refresh">
      <!-- 下拉加载 -->
      <van-list
        v-if="bol"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多东西了"
        @load="getData"
      >
        <CompanyItem
          v-for="item in list"
          :key="item.id"
          :item="item"
          @click.native="companyDetail(item.id)"
        ></CompanyItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入公司列表接口
// import { companiesList } from '@/api/company.js'
// 导入公司列表项
import CompanyItem from './CompanyItem.vue'
import { mapState, mapActions, mapMutations } from 'vuex'
// import Mixin from '../mixin'
export default {
  name: 'CompanyList',
  components: {
    CompanyItem
  },
  props: {},
  model: {
    prop: 'isDel'
  },
  // mixins: [Mixin],
  data () {
    return {
      bol: true,
      isLoading: false,
      loading: false,
      finished: false,
      scrollTop: 0
      // form: {
      //   start: 0,
      //   limit: 5,
      //   longitude: 116.403963,
      //   latitude: 39.915119,
      //   q: '',
      //   distance: null,
      //   score: null,
      //   scoreRange: null
      // },
      // initForm: {}
    }
  },
  computed: {
    ...mapState('company', ['total', 'list', 'isReset', 'form'])
  },
  created () {
    // this.initForm = JSON.parse(JSON.stringify(this.form))
  },
  mounted () {
    this.$bus.$on('getCompanyData', val => {
      this.getData(val)
    })
  },
  beforeDestroy () {
    this.$bus.$off('getCompanyData')
  },

  methods: {
    // vuex配置
    ...mapActions('company', ['getCompanyList']),
    ...mapMutations('company', ['changeReset', 'initForm', 'setStart']),

    // 重置滚动条
    setScrollTop () {
      document.documentElement.scrollTop = 0
    },

    // 获取公司列表
    async getData (obj) {
      // 调用列表接口
      if (obj && obj.isScrollTop) {
        this.setScrollTop()
      }
      if (obj && !obj.isFinish) {
        this.finished = false
      }
      await this.getCompanyList(this.form)
      this.isLoading = false
      this.loading = false
      // 判断是否已经到最后一条数据了
      if (this.total > this.list.length) {
        this.setStart(this.form.start + this.form.limit)
      } else {
        this.finished = true
      }
    },
    // 下拉刷新
    async refresh () {
      // 清空筛选样式
      this.$bus.$emit('initStyle')
      // 还原数据
      this.loading = false
      this.finished = false
      this.initForm()
      // 设置清空条件
      this.changeReset(true)
      // 重新调用接口获取数据
      this.getData()
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 跳转公司详情
    companyDetail (id) {
      this.$router.push(
        '/companyDetail/' + id + '?redirect=' + this.$route.fullPath
      )
    }
  }
}
</script>

<style scoped lang="less">
.company_list {
  margin: 48px 0 48px;
  padding: 0 30.21px 100px;
}
</style>
